<!--
 * @Descripttion:  老导航
 * @version:
 * @Author: tanghao1
 * @Date: 2021-01-21 15:39:19
 * @LastEditors: tanghao1
 * @LastEditTime: 2021-03-16 14:44:30
-->
<template>
  <div>
    <div class="nav-head">
      <el-row type="flex" class="row-bg" flex-direction="row-reverse">
        <el-col :span="4"><div><i class="el-icon-info" /><span>导航最多创建三级</span></div></el-col>
        <el-col :span="18" />
        <el-col :span="2"><el-button type="primary" size="mini" @click="addnav('new')">新增一级导航</el-button></el-col>
      </el-row>
    </div>
    <el-form
      ref="refNavForm"
      :model="formData"
      size="mini"
      label-width="0"
      :show-message="true"
    >
      <!-- 列表 -->
      <table-box
        :data="formData.list"
        :table-config="tableConfig"
        :off-set="-20"
        table-row-key="id"
        :table-tree-props="{children: 'next', hasChildren: 'hasChildren'}"
        lazy
      >
        <el-table-column
          prop="tabName"
          label="导航名称"
          sortable
          min-width="260"
        />
        <el-table-column
          prop="picUrl"
          label="导航图片"
          min-width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-image v-if="scope.row.picUrl" :src="scope.row.picUrl" class="basicpic" />
            <span v-else />
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="是否显示"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.state == 1?'是':'否' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="showPlatform"
          label="显示位置"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.state===1">{{ scope.row.showPlatform | fitlerPlatformName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="250" align="center">
          <template slot-scope="scope">
            <el-button class="btn-txt" type="text" size="mini" @click="setTop(scope.row)">置顶</el-button>
            <el-button class="btn-txt" type="text" size="mini" @click="setUp(scope.row)">上移</el-button>
            <el-button class="btn-txt" type="text" size="mini" @click="setDown(scope.row)">下移</el-button>
            <el-button class="btn-txt" type="text" size="mini" @click="setBottom(scope.row)">置底</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button class="btn-txt" type="text" size="mini" @click="addnav('edit',scope.row)">编辑</el-button>
            <el-button class="btn-txt" type="text" size="mini" @click="addnavSon(scope.row)">新增子导航</el-button>
            <el-button class="btn-txt" type="text" size="mini" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </table-box>
      <div class="pagination-container">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="pageSizes"
          :page-size="pagesize"
          layout="sizes, prev, pager, next, slot"
          :total="allTotal === 0 ? total : allTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <span class="el-pagination__jump">前往
            <el-input-number
              v-model="jumpPage"
              :controls="false"
              :min="1"
              @blur="showEnter"
              @keyup.enter.native="showEnter"
            />页</span>
        </el-pagination>
        <div v-show="total <= pagesize" class="pagination-info">当前显示
          <span>{{ handlePageRange(pagesize, currentPage) }}</span>，共
          <span class="total"> {{ formData.list.length }} </span> 条记录
        </div>
        <div v-show="total > pagesize" class="pagination-info">当前显示
          <span>{{ handlePageRange(pagesize, currentPage) }}</span>，共
          <span :class="[allTotal === 0 && total !== 0 ? 'total next-page': 'total']" @click="newEnter"> {{ allTotal === 0 && total !== 0 ? total-1 +'+': allTotal }}  </span> 条记录
        </div>
      </div>
    </el-form>
    <edit-form
      v-if="showEdit"
      ref="formDlg"
      :visible.sync="showEdit"
      :detail-data="detailData"
      :son-data="sonData"
      @success="refreshTable"
    />
  </div>
</template>

<script>
import { json2FormData } from '@/utils'
import EditForm from './EditForm'
import { deleteNav, setupNav, setdownNav, settopNav, setbottomNav, searchNav, getProductAdList } from '@/api/shopauxPlat/navConfig' // 新增编辑-保存,删除
export default {
  name: 'NavConfig',
  components: { EditForm },
  filters: {
    fitlerPlatformName(val) {
      if (!val) return ''
      const arr = val.split(',')
      const name = []
      if (arr.includes('mobile')) {
        name.push('移动端')
      }
      if (arr.includes('pc')) {
        name.push('PC')
      }
      if (arr.includes('pad')) {
        name.push('PAD')
      }
      return name.join(',')
    }
  },
  props: {},
  data() {
    return {
      tableConfig: {
        interfacePath: null,
        hideFuncBar: true
      },
      formData: {
        list: [] // table列表初始化
      },
      jumpPage: 1, // 分页前往默认值
      pagesize: 10, // 每页的条数
      pageSizes: [10, 20, 30, 50, 100],
      currentPage: 1, // 默认开始页面
      addEditFlag: false, // 增行/编辑后的标识，true时只显示保存和取消
      total: 0,
      allTotal: 0,
      otherFilters: [],
      tableData: [],
      showEdit: false,
      detailData: '',
      sonData: ''
    }
  },
  computed: {},
  created() {
    this.initData()
  },
  methods: {
    // 新增/编辑
    async addnav(type, data) {
      if (type === 'edit') {
        /* const productAdvertisementDTOList = [
          { sort: 0, picUrl: 'https://testimg.quanyou.com.cn/group1/M01/01/CD/rB8Mk2KkCQeAL_jFAAAciJvhfV4427.png' },
          { sort: 1, picUrl: 'https://testimg.quanyou.com.cn/group1/M01/01/CD/rB8MkmKkCQeAJEn4AAFObr6LJgs222.png' }
        ] */
        let productAdvertisementDTOList = []
        await getProductAdList(data.id).then(res => {
          productAdvertisementDTOList = res.data || []
        })
        const showPlatform = data.showPlatform ? data.showPlatform.split(',') : []
        const isLevelOne = this.formData.list.some(v => v.id === data.id)
        this.detailData = { ...data, ...{ isLevelOne, showPlatform, productAdvertisementDTOList }}
      } else {
        this.detailData = ''
      }
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    addnavSon(data) {
      this.sonData = data
      this.detailData = ''
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    // 删除
    handleDel(data) {
      const id = data.id
      this.$confirm('确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteNav(id).then(res => {
          if (res.success === 1) {
            this.$message.success('删除成功')
            // this.searchNav()
            this.initData()
          }
        })
      })
    },
    // 上移
    setUp(data) {
      const id = data.id
      setupNav(id).then(res => {
        if (res.success === 1) {
          this.$message.success('上移成功')
          // this.searchNav()
          this.initData()
        }
      })
    },
    // 下移
    setDown(data) {
      const id = data.id
      setdownNav(id).then(res => {
        if (res.success === 1) {
          this.$message.success('下移成功')
          // this.searchNav()
          this.initData()
        }
      })
    },
    // 置顶
    setTop(data) {
      const id = data.id
      settopNav(id).then(res => {
        if (res.success === 1) {
          this.$message.success('置顶成功')
          // this.searchNav()
          this.initData()
        }
      })
    },
    // 置底
    setBottom(data) {
      const id = data.id
      setbottomNav(id).then(res => {
        if (res.success === 1) {
          this.$message.success('置底成功')
          // this.searchNav()
          this.initData()
        }
      })
    },
    // 切换页显示条数
    handleSizeChange(size) {
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再跳页')
        return false
      }

      this.pagesize = size
      this.jumpToFirstPage()
      this.refreshTable()
    },
    // 当操作在非第一页时，跳回第一页
    jumpToFirstPage() {
      this.currentPage = 1 // 不在第一页搜索时，调回第一页显示
      this.jumpPage = 1
      this.allTotal = 0
      this.total = 0
    },
    // 分页，获取下一页数据
    handleCurrentChange(currentPage) {
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再跳页')
        return false
      }
      this.jumpPage = currentPage
      this.currentPage = currentPage
      this.refreshTable()
    },
    // 前往第几页
    showEnter(ev) {
      this.jumpPage = ev.srcElement.value
      this.getTotal(ev.srcElement.value)
    },
    // 获取数据总条数
    getTotal(val) {
      if (this.allTotal !== 0) return
      if (this.addEditFlag === true) {
        this.$message.warning('当前处于修改状态，请保存或取消后再获取总页数')
        return false
      }
      const searchData = json2FormData({
        page: val,
        rows: this.pagesize,
        order: 'desc',
        sort: '',
        onlyCountFlag: false,
        filtersRaw: JSON.stringify(this.otherFilters)
      })
      searchNav(searchData).then(res => {
        if (res.success === 1) {
          this.allTotal = res.data.total
          this.currentPage = res.data.page
          this.jumpPage = res.data.page
          this.formData.list = res.data.records
        }
      })
    },
    // 计算当前数据范围 如:1-20
    handlePageRange(size, currentPage) {
      const start = size * (currentPage - 1) + 1
      const end = size * currentPage

      const pageRange = `${start}-${end}`
      return pageRange
    },
    // 获取总数据条数
    newEnter() {
      this.getTotal(this.currentPage)
    },
    refreshTable() {
      this.showEdit = false
      // this.searchNav()
      this.$nextTick(() => {
        this.initData()
      })
    },
    initData() {
      const searchData = json2FormData({
        page: this.currentPage,
        rows: this.pagesize,
        order: 'desc',
        sort: '',
        onlyCountFlag: false,
        filtersRaw: JSON.stringify(this.otherFilters)
      })
      searchNav(searchData).then(res => {
        if (res.success === 1) {
          const { page, rows, total, records } = res.data
          const list = records
          this.total = total

          if (total <= page * rows) {
            this.allTotal = total
          }
          this.formData.list = list
          // this.formData.list = res.data.records
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.pagination-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 8px 0 !important;
    .el-pagination{
      padding: 2px 0;
    }
    .pagination-info {
      padding: 2px 0 !important;
      font-size: 12px !important;
      .total {
        color: #3DC094;
      }
    }
    .el-pagination__jump {
      display: inline-block;
      position: relative;
      top: -4px;
      line-height: 28px;
      margin: 0 20px;
      /deep/ .is-without-controls {
        margin: 0 4px;
        width: 50px !important;
        /deep/ input {
          height: 28px;
        }
      }
    }
}
 .nav-head{

 }
  .basicpic{
   width: 100px;
   height: 100px;
   margin: 5px;
 }
 .btn-txt{
  padding: 0 5px !important;
 }
</style>

